<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bom</title>
    <style type="text/css">
pre{
    /*font-family: "微软雅黑";*/
    font-size: 16px;
    line-height: 24px;
}
#div1{
    width: 200px;
    height: 150px;
    background-color: #CCCCFF;
    position: absolute;
    right: 0;
    bottom: 0;
}
body{
    height: 2000px;
}
    </style>
</head>
<body>

<pre>
打开、关闭窗口
    open
    close：关闭时提示问题

常用属性
    window.navigator.userAgent
    window.locaiton

窗口尺寸、工作区尺寸
可视区尺寸
    document.documentElement.clientWidth
    document.documentElement.clientHeight
滚动距离
    document.body.scrollTop || document.documentElement.scrollTop

系统对话框
    警告框：alert("xxx"); 没有返回值
    选择框：confirm("提问的内容"); 返回boolean
    输入框：prompt(); 返回字符串或null


window对象常用事件
    onload
    onscroll
    onresize
    例子：回到顶部按钮、侧边栏广告
        闪烁问题    


window.close()的问题
    chrome:直接关闭
    IE：弹出提示框，询问是否关闭
    FF：不能关闭，只能关闭由js脚本通过window.open打开的窗口


</pre>

<h2>window.open</h2>
<input type="button" value="openBaidu" onclick="window.open('http://www.baidu.com')"/>

<h2>run the code</h2>
<textarea id="txt1" rows="10" cols="40">
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>xxx</title>
    </head>
    <body>

    <input type="button" value="openBaidu" onclick="window.open('http://www.baidu.com')"/>
    </body>
    </html>
</textarea>
<input id="btn1" type="button" value="run" />

<h2>window.close--has problem with FF</h2>
<input type="button" value="closeWin" onclick="window.close()"/>

<h2>window.open close</h2>
<input type="button" value="open" onclick="window.open('29_bom_open_close.html')"/>

<h2>get size</h2>
<input type="button" id="btn2" value="get size"/>

<h2>右下角悬浮框</h2>
<div id="div1">IE6不支持fixed, 如果是IE6，用absolute定位+运动来解决，其他用fixed定位；
也可以用css表达式来解决，但消耗性能，谨慎使用</div>

<script>
window.onload = function(){
    var txt1 = document.getElementById("txt1");
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");

    btn1.onclick = function(){
        // document.write(); 先清空，再写入
        var newWin = window.open("about:blank","_blank");
        newWin.document.write(txt1.value);
    }

    btn2.onclick = function(){
        // console.log(document.documentElement.clientWidth);
    }

    // console.log(window.navigator.userAgent);
    // console.log(window.location);
}

window.onscroll = window.onresize = function(){
    // 右下角悬浮框
    var div1 = document.getElementById("div1");
    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    var boxHeight = div1.offsetHeight;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    var top = scrollTop + clientHeight - boxHeight;
    div1.style.top = top + 'px';
    // div1.style.bottom = 0;
}

</script>
</body>
</html>